<!-- 360 -->
<script setup>
import { ref, onMounted, nextTick } from "vue";
import * as echarts from 'echarts'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const driverDetail = ref('')

// 柱形图
const initRateLineChart = () => {
    const charts = echarts.init(document.querySelector('.rateLine'))
    const option = {

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            // 图例文字
            textStyle: {
                color: '#4c9bfd',
                fontSize: 16
            }
        },

        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        // 修改刻度颜色
        axisLabel: {
            color: '#4c9bfd',
            fontSize: 10
        },


        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: data.value
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '噪声强度',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: data2.value
            },
            {
                name: '信号利用率',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: data3.value
            },
            {
                name: '干扰率',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: data4.value
            }
        ]
    };
    charts.setOption(option)
}

//设备详情
import { deviceDetailListService } from '@/api/SiteMana.js'
const deviceDetail = ref('')
const deviceDetailList = async () => {
    let params = {
        id: route.params.id
    }
    let result = await deviceDetailListService(params);
    deviceDetail.value = result.data
}
deviceDetailList()

// 全部设备
import { deviceAllListService } from '@/api/SiteMana.js'
const deviceAll = ref('')
const data = ref([])
const data2 = ref([])
const data3 = ref([])
const data4 = ref([])
const deviceAllList = async () => {
    let result = await deviceAllListService();
    deviceAll.value = result.data
    // 遍历从后端获取的数据
    deviceAll.value.forEach(item => {
        data.value.push(item.name2)
        data2.value.push(item.noise)
        data3.value.push(item.utilize)
        data4.value.push(item.interfere)
    })
}


onMounted(async () => {
    await deviceAllList()
    initRateLineChart()
})
</script>

<template>
    <div class="viewport">
        <div class="column">
            <div class="panel number">
                <div class="inner">
                    <ul>
                        <li>
                            <h4>{{ deviceDetail.noise }}</h4>
                            <span>
                                <i class="icon-dot" style="color: #006cff;"></i>
                                噪声强度
                            </span>
                        </li>
                        <li>
                            <h4>{{ deviceDetail.utilize }}</h4>
                            <span>
                                <i class="icon-dot" style="color:#6acca3"></i>
                                信道利用率
                            </span>
                        </li>
                        <li>
                            <h4>{{ deviceDetail.interfere }}</h4>
                            <span>
                                <i class="icon-dot" style="color:#ed3f35"></i>
                                干扰率
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="panel rate">
                <div class="inner">
                    <div class="chart">
                        <div class="rateLine" ref="rateLine"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h4 {
    font-weight: 400;
}

a {
    color: #666;
    text-decoration: none;
}

a:hover {
    color: #e33333;
}

li {
    list-style: none;
}

.viewport {
    background: url(@/assets/bg.jpg) no-repeat 0 0 / cover;
    display: flex;
    min-width: 1024px;
    max-width: 1920px;
    margin: 0 auto;
    // padding: 88px 20px 0;
    min-height: 780px;
    // overflow: hidden;

    .column {
        flex: 2;
        // margin-right: 60px;
        margin: 0 20px;
        // background-color: pink;

        .panel {
            position: relative;
            border: 15px solid transparent;
            border-width: 51px 38px 20px 132px;
            border-image-source: url(@/assets/border.png);
            border-image-slice: 51 38 20 132;
            margin-bottom: 20px;

            h3 {
                font-size: 20px;
                color: #fff;
                font-weight: 400;
            }

            .inner {
                position: absolute;
                top: -51px;
                left: -132px;
                right: -38px;
                bottom: -20px;
                padding: 24px 36px;
                // background-color: red;

            }
        }
    }

}

.number {
    height: 160px;

    ul {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        margin-top: 25px;

        h4 {
            font-size: 28px;
            color: #fff;
            margin: 0 0 8px 4.8px;
        }

        span {
            font-size: 16px;
            color: #4c9bfd;
        }
    }
}

.rate {
    height: 500px;

    .chart {

        .rateLine {
            height: 450px;
            width: 1370px;
            // background-color: #fff;
        }
    }
}
</style>